{% extends "myadmin/base.html" %}


{% block mainbody %}
<h3>
	主机管理&nbsp;详情页
</h3>

<!--主机信息表格开始-->
<table class="table table-bordered" style="margin-bottom: 10px;">
    <tr>
        <th width="10%" style="text-align:right;background-color:#eee;">标签：</th>
        <td width="30%">{{ host.tag }}</td>
        <th width="10%" style="text-align:right;background-color:#eee;">IP地址：</th>
        <td width="50%">{{ host.ip }}</td>
    </tr>
</table>  
<!--主机信息表格结束-->

<!--主机使用率图表开始-->
<ul class="nav nav-tabs" style="margin-bottom: 10px;">
    <li id="CPU-tab" role="presentation" class="chart-tab active"><a href="javascript:clickTab('CPU')">CPU：{{ host.cpu }}核</a></li>
    <li id="MEM-tab" role="presentation" class="chart-tab"><a href="javascript:clickTab('MEM')">内存：{{ host.memory }}G</a></li>
    <li id="DISK-tab" role="presentation" class="chart-tab"><a href="javascript:clickTab('DISK')">硬盘：{{ host.disk }}G</a></li>
</ul>
<div id="usagechart" class="chartContainer" style="height:400px; width:870px"></div>
<!--主机使用率图表结束-->

<script type="text/javascript">
    //初始化echarts实例
    var usagechart = $("#usagechart").get(0);
    var myChart = echarts.init(usagechart);

	//初始化图表
    function initChart(tabname, title){
	    var percents = [];       
	    var addtimes = [];

	    //对echarts做基础配置
	    var option = {
	        title: {
	        	x: 'center',
	        	y: 'bottom',
	            text: title
	        },
	        tooltip: {
	            trigger: 'axis',
	            formatter: function(value) {//鼠标滑过时显示内容的格式化
	            	//console.log(value);
	                var template = "";
	                template += '时间：' + value[0].axisValue + '<br/>';
	                template += value[0].seriesName + '：' + value[0].data + '%';
	                return template;
	            }
	        },
	        legend: {
	        	show: true,
	            data: [tabname]//要与series中的name一致
	        },
	        xAxis: [{//x轴的数据
	            type: 'category',
	            name: '时间(1小时)',
	            boundaryGap: false,//若为true,则x轴的值不在刻度上.
	            data: addtimes,
	            axisLabel: {//x轴的内容格式化,很有用的属性
	            	interval: 5,
	                formatter: function(value) {
		               	var list = value.split(':');
		               	var array = ['00', '15', '30', '45'];
		               	if (array.indexOf(list[1]) >= 0 ){
		               		//var template = list[0]+':'+list[1]+':'+list[2];
		               		return value;
		               	}
		               	else {
		               		return '';
		               	}
		            }
	            }
	        }],
	        yAxis: [{
	            type: 'value',
	            name: "使用率(%)",
	            max : 100,
	            min : 0,
	            axisLabel: {//y轴的内容格式化,很有用的属性
	                formatter: '{value}'
	            }
	        }],
	        animation : true,//是否启用图表初始化动画，默认开启
	        series: [{
	            itemStyle: {
	                normal: {
	                    lineStyle: {
	                        color: '#3399ff'//控制折线颜色
	                    }
	                }
	            },
	            name: tabname,
	            type: 'line',
	            smooth:true,//是否平滑曲线显示
	            data: percents,
	            markPoint: {
	                data: [/*显示最值*/
	                    { type: 'max'}, 
	                    { type: 'min'},
	                ]
	            },
	            /*markLine: {
	                data: [
	                    { type: 'average'}//显示平均值
	                ]
	            }*/
	        }]
	    };
	    myChart.showLoading();
	    myChart.setOption(option);  //载入图表
	}    

	initChart('CPU','CPU使用率（每10秒刷新）');
	var timer = setTimeout(display_cpu, 10000); //设定定时器，开始执行CPU使用率图表刷新
    
    //切换tab页
    function clickTab(tabname){
    	$("li.chart-tab").removeClass("active");  
		$("li#"+tabname+"-tab").addClass("active"); 

    	//清除定时器 
		if (timer != null){
			clearTimeout(timer); 
		}
		if (tabname == 'CPU'){
			initChart('CPU','CPU使用率（每10秒刷新）');
			timer = setTimeout(display_cpu, 10000); //设定定时器，开始执行CPU使用率图表刷新
		}
		if (tabname == 'MEM'){
			initChart('内存','内存使用率（每10秒刷新）');
			timer = setTimeout(display_mem, 10000); //设定定时器，开始执行内存使用率图表刷新
		}
		if (tabname == 'DISK'){
			initChart('硬盘','硬盘使用率（每10秒刷新）');
			timer = setTimeout(display_disk, 10000); //设定定时器，开始执行硬盘使用率图表刷新
		}
	}

    //显示CPU使用率图表
    function display_cpu() {
    	//清除定时器 
		if (timer != null){
			clearTimeout(timer); 
		}
		//获得图表的options对象  
        var myOption = myChart.getOption();  
        //通过Ajax获取数据 
        $.ajax({
            type:'get',
            url:"{% url 'myadmin_usage_cpu' host.id %}",
            dataType:'json',
            async: false,   
            success : function(result) {
                if (result != null && result.data.length > 0) {
                	var percents = [];
                	var addtimes = [];
                    for(var i=0; i<result.data.length; i++){
                       percents.push(result.data[i].percent);     
                       addtimes.push(result.data[i].addtime);
                    }

                    //配置echarts
                    myOption.title.text = 'CPU使用率（每10秒刷新）';
                    myOption.legend.data = ['CPU'];
                    myOption.xAxis[0].data = addtimes;  
                    myOption.series[0].name = 'CPU';
                    myOption.series[0].data = percents;  

                    myChart.hideLoading();
                    // 为echarts对象加载数据
                    myChart.setOption(myOption);
                }
                else {
                    alert("error");
                    myChart.hideLoading();
                }
            },
            error : function(errorMsg) {
	            //请求失败时执行该函数
	            alert("图表请求数据失败，可能是服务器开小差了。");
	            myChart.hideLoading();      
            }
        });
		timer = setTimeout(display_cpu, 10000); //设定定时器，循环执行
    }

    //显示内存使用率图表
    function display_mem() {
    	//清除定时器 
		if (timer != null){
			clearTimeout(timer); 
		}
		//获得图表的options对象  
        var myOption = myChart.getOption();  
        //通过Ajax获取数据 
        $.ajax({
            type:'get',
            url:"{% url 'myadmin_usage_mem' host.id %}",
            dataType:'json',
            async: false,   
            success : function(result) {
                if (result != null && result.data.length > 0) {
                	var percents = [];
                	var addtimes = [];
                    for(var i=0; i<result.data.length; i++){
                       percents.push(result.data[i].percent);     
                       addtimes.push(result.data[i].addtime);
                    }

                    //配置echarts
                    myOption.title.text = '内存使用率（每10秒刷新）';
                    myOption.legend.data = ['内存'];
                    myOption.xAxis[0].data = addtimes;
                    myOption.series[0].name = '内存';
                    myOption.series[0].data = percents;  

                    myChart.hideLoading();
                    // 为echarts对象加载数据
                    myChart.setOption(myOption);
                }
                else {
                    alert("error");
                    myChart.hideLoading();
                }
            },
            error : function(errorMsg) {
	            //请求失败时执行该函数
	            alert("图表请求数据失败，可能是服务器开小差了。");
	            myChart.hideLoading();      
            }
        });
		timer = setTimeout(display_mem, 10000); //设定定时器，循环执行
    }


    //显示硬盘使用率图表
    function display_disk() {
    	//清除定时器 
		if (timer != null){
			clearTimeout(timer); 
		}
		//获得图表的options对象  
        var myOption = myChart.getOption();  
        //通过Ajax获取数据 
        $.ajax({
            type:'get',
            url:"{% url 'myadmin_usage_disk' host.id %}",
            dataType:'json',
            async: false,   
            success : function(result) {
                if (result != null && result.data.length > 0) {
                	var percents = [];
                	var addtimes = [];
                    for(var i=0; i<result.data.length; i++){
                       percents.push(result.data[i].percent);     
                       addtimes.push(result.data[i].addtime);
                    }

                    //配置echarts
                    myOption.title.text = '硬盘使用率（每10秒刷新）';
                    myOption.legend.data = ['硬盘'];
                    myOption.xAxis[0].data = addtimes;
                    myOption.series[0].name = '硬盘';
                    myOption.series[0].data = percents;  

                    myChart.hideLoading();
                    // 为echarts对象加载数据
                    myChart.setOption(myOption);
                }
                else {
                    alert("error");
                    myChart.hideLoading();
                }
            },
            error : function(errorMsg) {
	            //请求失败时执行该函数
	            alert("图表请求数据失败，可能是服务器开小差了。");
	            myChart.hideLoading();      
            }
        });
		timer = setTimeout(display_disk, 10000); //设定定时器，循环执行
    }

    /*var interval = setInterval(function () {
    	//如切换到其他tab页，中止定时
    	if (tab != "CPU"){
			clearInterval(interval);
		}

        //获得图表的options对象  
        var myOption = myChart.getOption();  
        //通过Ajax获取数据 
        $.ajax({
            type:'get',
            url:"{% url 'myadmin_usage_cpu' host.id %}",
            dataType:'json',
            async: false,   
            success : function(result) {
                if (result != null && result.data.length > 0) {
                	percents = [];
                	addtimes = [];
                    for(var i=0; i<result.data.length; i++){
                       percents.push(result.data[i].percent);     
                       addtimes.push(result.data[i].addtime);
                    }

                    //console.log(addtimes);
                    myOption.title.text = 'CPU使用率（每10秒刷新）';
                    myOption.legend.data = ['CPU'];
                    myOption.xAxis[0].data = addtimes;  
                    myOption.series[0].name = 'CPU';
                    myOption.series[0].data = percents;  

                    myOption.xAxis[0].axisLabel.formatter = function(value) {
	                	var list = value.split(":");
	                	console.log(list[1]+"-"+list[2]);
	                	if (list[1] in ["00", "15", "30", "45"]){
	                		return value;
	                	}
	                	else {
	                		return '';
	                	}
	                };

                    myChart.hideLoading();
                    // 为echarts对象加载数据
                    myChart.setOption(myOption);
                }
                else {
                    alert("error");
                    myChart.hideLoading();
                }
            },
            error : function(errorMsg) {
	            //请求失败时执行该函数
	            alert("图表请求数据失败，可能是服务器开小差了。");
	            myChart.hideLoading();      
            }
        });
    }, 10000);*/

</script>
{% endblock %}